import React, { Component } from 'react'
import { Redirect, Switch, Route } from 'react-router-dom'
import { Layout } from 'antd'

import memoryUtils from '../../utils/memory_utils'
import Header from '../../components/Header/Header'
import LeftNav from '../../components/LeftNav/LeftNav'
import Home from '../Home/Home'
import Categories from '../Categories/Categories'
import Product from '../Product/Product'
import Role from '../Role/Role'
import User from '../User/User'
import Bar from '../Charts/Bar'
import Line from '../Charts/Line'
import Pie from '../Charts/Pie'

const { Footer, Sider, Content } = Layout


// 后台管理的路由组件
export default class Admin extends Component {
  render () {
    const user = memoryUtils.user
    // 如果内存没有存储 user => 当前没有登录
    if (!user || !user._id) {
      // 自动跳转到登录
      return <Redirect to='/login' />
    }

    return (
      <Layout style={{width: '100%', minHeight: '100%'}}>
        <Sider>
          <LeftNav />
        </Sider>
        <Layout>
          <Header />
          <Content style={{margin: 20, backgroundColor: '#fff'}}>
            <Switch>
              <Route path='/home' component={Home} />
              <Route path='/categories' component={Categories} />
              <Route path='/product' component={Product} />
              <Route path='/role' component={Role} />
              <Route path='/user' component={User} />
              <Route path='/charts/bar' component={Bar} />
              <Route path='/charts/line' component={Line} />
              <Route path='/charts/pie' component={Pie} />
              <Redirect to='/home' />
            </Switch>
          </Content>
          <Footer style={{textAlign: 'center', color: '#ccc'}}>推荐使用谷歌浏览器, 以获得更佳页面操作体验</Footer>
        </Layout>
      </Layout>
    )
  }
}

